<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
    <link type="text/css" href="${pageContext.request.contextPath}/shop/admin/css/Admin.css" rel="stylesheet"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <%@include file="../header-side.jsp"%>
    <script>
        if((window.location.pathname).indexOf('goods')>=0 || (window.location.pathname).indexOf('Notice')>=0){
            document.getElementsByClassName('goods')[0].className+='  layui-this '
        }
    </script>
    <div class="layui-body">
        <span class="layui-breadcrumb">
							<a href="${pageContext.request.contextPath}/shop/client">首页</a>
							<a href="${pageContext.request.contextPath}/shop/admin/goods">商品管理</a>
							<a><cite>编辑</cite></a>
						</span>
        <hr>
        <div class="layui-panel" style="width: 500px;margin: 100px auto">
            <div class="layui-card-header">编辑商品</div>
            <div style="padding: 30px;">
                <form class="layui-form" action="<c:url value="/shop/modifyBook2"/>" method="get">
                    <div class="layui-form-item">
                        <label class="layui-form-label">ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" class="layui-input" readonly="readonly" value="${book.id}"
                                   placeholder="无需填写">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">书名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" class="layui-input" value="${book.name}" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">价格</label>
                        <div class="layui-input-block">
                            <input type="text" name="price" class="layui-input" value="${book.price}" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-block">
                            <select name="category" lay-verify="" lay-search lay-verify="required">
                                <option value="计算机" ${book.category == "计算机"?"selected":""}>计算机</option>
                                <option value="文学" ${book.category == "文学"?"selected":""}>文学</option>
                                <option value="科技" ${book.category == "科技"?"selected":""}>科技</option>
                                <option value="社科" ${book.category == "社科"?"selected":""}>社科</option>
                                <option value="生活百科" ${book.category == "生活百科"?"selected":""}>生活百科</option>
                                <option value="生活" ${book.category == "生活"?"selected":""}>生活</option>
                                <option value="经营" ${book.category == "经营"?"selected":""}>经营</option>
                                <option value="艺术" ${book.category == "艺术"?"selected":""}>艺术</option>
                                <option value="考试" ${book.category == "考试"?"selected":""}>考试</option>
                                <option value="学术" ${book.category == "学术"?"selected":""}>学术</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="pnum" class="layui-input" value="${book.pnum}" lay-verify="required|number">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="preview" onclick="pre('${book.imgurl}')">预览图片</button>
                                <button type="button" id="upload" class="layui-btn layui-btn-primary " id="upload">上传图片</button>
                            <input type="text" name="imgurl" readonly="readonly" class="layui-input" placeholder="图片路径" value="${book.imgurl}">
                            <script>
                                layui.use('upload', function(){
                                    var upload = layui.upload;

                                    //执行实例
                                    var uploadInst = upload.render({
                                        elem: '#upload' //绑定元素
                                        ,url: '${pageContext.request.contextPath}/shop/admin/upload'
                                        //上传接口
                                        ,accept: 'images'
                                        ,done: function(res){
                                            //上传完毕回调
                                            layer.msg(res.msg);
                                            document.getElementById("preview").setAttribute("onclick","pre('"+res.data.src+"')");
                                            document.getElementsByName("imgurl")[0].value = res.data.src
                                        }
                                        ,error: function(){
                                            //请求异常回调
                                        }
                                    });
                                });
                            </script>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="description" class="layui-input" value="${book.description}" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="button" class="layui-btn  layui-btn-primary" onclick="window.location.href='${pageContext.request.contextPath}/shop/admin/goods'">返回列表</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    //页面层-图片
    function pre(imgUrl){
        console.log(imgUrl)
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['auto'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: "<img src='${pageContext.request.contextPath}/shop/client"+imgUrl +"'  height='500px' alt='暂无图片'/>"
        });
    }
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#n_time', //指定元素
            type: 'datetime',
            format: 'yyyyMMddHHmmss'
        });
    });
</script>
</body>

</html>